<template>
  <div class="box">
    <header>
      <div>
        <van-nav-bar
          class="back"
          left-text="搜索"
          left-arrow
          @click-left="onClickLeft"
        />
      </div>
    </header>
    <section>
      <van-search
        v-model="value"
        show-action
        label="地址"
        placeholder="请输入搜索关键词"
        shape="round"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch" class="ser">搜索</div>
        </template>
      </van-search>
    </section>
  </div>
</template>
  
  <script>
import { Toast } from "vant";

export default {
  name: "Ser",
  data() {
    return {
      value: "",
      text: "",
      list: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onSearch() {
      this.$router.push("/Ser/SearchShop");
      let arr = [];
      arr.push(this.value);
      localStorage.setItem(
        "this.keyword",
        JSON.stringify(arr.push(this.value))
      );

      let all = localStorage.getItem("key");
      if (all) {
        // 将数组转字符串
        console.log(JSON.parse(all));
        this.recent = JSON.parse(all);
      }
    },
  },
};
</script>
  
  <style lang="css" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 0 15px;
  box-sizing: border-box;
}
header {
  min-height: 3.5rem;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  flex-wrap: wrap;
}
header .back {
  text-align: left;
  font-size: 14px;
  color: rgb(52, 184, 236);
}
.ser {
  color: rgb(11, 96, 223);
}
</style>